<template>
	<view class="container">
		<view class="left">
			<view style="font-size: 40rpx;">流程选择</view>
			<view>
				<radio-group  class="radio-container" @change="onRadioChange">
					<label class="radio"><radio value="workflow1" checked="true" @click="updateText" />流程1</label>
					<br></br>
					<label class="radio"><radio value="workflow2" @click="updateText"/>流程2</label>
					<br></br>
					<label class="radio"><radio value="workflow3" @click="updateText"/>流程3</label>
					<br></br>
					<label class="radio"><radio value="workflow4" @click="updateText"/>流程4</label>
					<br></br>
					<label class="radio"><radio value="workflow5" @click="updateText"/>流程5</label>
					<br></br>
					<label class="radio"><radio value="workflow_others" @click="updateText"/>其他</label>
				</radio-group>
				<button class="btn" @click="goDispatch()">提交</button>
			</view>

		</view>
		<view id="right">
			<view id="scrollable-text">
				<!--<textarea>{{ formattedText }}</textarea>-->
			    <pre  style="height:100vh; width: 100vw;" v-if="selectedOption === 'workflow_others'">
					<form>
					      <textarea
					        id="custom-text"
							placeholder="请输入自定义工作流"
					        v-model="customText"
					        rows="4"
					        style="height: 100%;white-space: pre-wrap; font-family: monospace; width: 100%;border: 1px,black;"
					      ></textarea>
					      <!-- <button @click="handleSubmit()">提交</button> -->
					</form>
				</pre>
				
				<pre v-else class="scrollable-pre">
					<code>{{formattedText}}</code>
				</pre>
				
				
			</view>
		</view>
	</view>
</template>

<script>
import { request } from 'http';
	export default {
		data() {
			return {
				selectedOption:"workflow1",
				jsondata : {},
				customText:''
			}
		},
		computed: {
		    formattedText() {
		      const text = this.jsondata[this.selectedOption];
			  // console.log(text)
			  // var jsonText = text
			  var jsonText = JSON.stringify(text,null,2);
		      //这里可以根据需要添加更多的字段和颜色
		      // return jsonText.replace(/"ServiceName": "(.*?)"/g, '<span class="ServiceName">$&</span>')
		      //            .replace(/"ServiceID": (\d+)/g, '<span class="ServiceID">$&</span>')
		      //            .replace(/"Workflow": "(.*?)"/g, '<span class="Workflow">$&</span>');
			  return jsonText
		    }
		  },
		  created() {
		  	this.readJsonDataFromFiles()
		  },
		  mounted() {
		  	this.readJsonDataFromFiles()
		  },
		  methods: {
			  handleSubmit() {
			        // 在这里处理提交逻辑，例如发送数据到服务器
			        console.log('提交的文本:'+this.customText);
					this.jsondata["workflow_others"] = JSON.parse(this.customText)
					console.log(this.jsondata)
			        // 这里可以添加发送到服务器的代码，例如使用 axios
			        // axios.post('/submit-your-endpoint', { text: this.customText })
			        //   .then(response => {
			        //     // 处理响应
			        //   })
			        //   .catch(error => {
			        //     // 处理错误
			        //   });
			      },
			updateContent() {
				
				const editablePre = this.$refs.editablePre;
				if (editablePre) {
				        editablePre.focus();
						console.log(editablePre.innerText)
				}		
				
				if(this.selectedOption == "workflow_others"){
						 this.jsondata["workflow_others"] = this.$refs.editablePre.innerText;
				}else{
						uni.showModal({
							title:"警告",
							content: "预定义工作流不可修改，请切换至 其他 选项",
							showCancel:false
						})
					}
					
					console.log(this.jsondata)
			        // 当<pre>的内容被编辑时，更新codeContent
			       
			      },
		    onRadioChange(e) {
		      // 当单选框变化时，文本会自动更新，因为 formattedText 是一个计算属性
			  console.log(e.detail.value)
			  this.selectedOption = e.detail.value
			  
			  if (e.detail.value === 'workflow_others') {
			          this.$nextTick(() => {
			            this.updateContent();
			          });
			        }
		    },

			readJsonDataFromFiles(){
				uni.request({
					url: 'http://192.168.1.199:5000/getWorkflow',
					method:"POST",
					header:{
						'Content-Type':'application/json',
					},
					success: async(event) => {
						console.log(event.data)
						this.jsondata = event.data
					},
					fail: (event) => {
						
					}
				})
			},
			goDispatch(){
				uni.request({
					url: 'http://192.168.1.199:5000/goDispatch',
					method:"POST",
					header:{
						'Content-Type':'application/json',
					},
					data:{
						"jsondata":this.jsondata[this.selectedOption]
					},
					success: async(event) => {
						uni.showToast({
							title: '已提交',
							icon: 'none',
							duration: 1000
						});
					},
					fail: (event) => {
						uni.show({
							title:event,
						})
					}
				})
			}
		  }
	}
</script>

<style>
.radio{
	margin-left: 15%;
	margin-top: 5rpx;
}
.radio-container {
	  display: flex; /* 使用 Flexbox 布局 */
	  flex-direction: column; /* 子元素纵向排列 */
	  align-items: flex-start; /* 子元素在交叉轴的起点对齐 */
	}
.container {
  display: flex; /* 使用 Flexbox 布局 */
  width: 100%; /* 容器宽度为 100% */
  height: 100%;
  background: linear-gradient(to bottom, #001f3f 0%, #2e5fac 50%, #448cff 100%);
}

.left, .right {
  flex: 1; /* 使两个子 view 平分父容器的空间 */
  text-align: center; /* 文本居中，根据需要可以去掉 */
  height: 70%; /* 高度示例，根据需要设置 */
  /*line-height: 100px; /* 行高与高度相同，实现垂直居中，根据需要设置 */
}

/* 可以添加一些边距和背景色以便于区分 */
.left {
color: #fff;
	
  flex: 0 0 30%; /* 左侧固定宽度为父容器宽度的30% */
  background-color: rgba(255, 255, 255, .3);
  margin-right: 10px; /* 左侧与右侧的间隔 */
}

#right {
  flex: 0 0 70%; /* 左侧固定宽度为父容器宽度的30% */
  background-color: #e7e7e7; /* 右侧背景色 */
}
#scrollable-text {
  overflow: auto;
  width: 70vw;
  height: 100%;
  max-height: 100%; /* 根据需要调整高度 */
  border: 1px solid #ccc;

}
  .scrollable-pre{
	   padding: 10px;
	    /* 固定宽度和最大高度 */
	    height: 100%;
		width: 100vw;
	    /* 启用垂直滚动条 */
	    overflow: auto;
		font-size: 24rpx;
	  /*  white-space: pre-wrap;确保文本能够换行 */
  }
.btn{
	width:30%;
	margin-top: 30rpx;
}
.ServiceName{
	color: blue;
}
.ServiceID{
	color: blueviolet;
}
</style>
